'use strict';
import React from 'react'
import JRoll from 'jroll'
import styles from './MyRoll.less'

//ID={} //组件ID，单页面多个JRoll时必填
//height={} //高度，默认100%
//topMax={50} //下拉刷新临界值
//bottomMax={-50} //上拉加载临界值（选用）
//topf={50}  //下拉边界值(为了显示loading动画，ps最好等于topMax)
//bounce = {true} //回弹动画开关
//topLoading={<TopLoading/>} //自定义loading动画组件 
//topFr={this.selshoppingCart.bind(this)} //下拉刷新回调
//bottomFr={null} //上拉加载回调
//isOut={ture} //取消延时--针对更新后退出


export default class MyJRoll_Y extends React.Component {
    constructor(props) {
        super(props)
        this.jroll = null
        this.state = {
            topShow : false,
            bottomShow: false
        }
    }
    componentDidMount() {
        let wrappers = this.props.ID || 'wrappers'
        this.jroll = new JRoll(`#${wrappers}`,{
            minY:this.props.topf?this.props.topf:0,
            bounce:this.props.bounce?true:false
        })
        this.jroll.refresh()
        this.jroll.on('scrollEnd', () => {
            this.jroll.refresh()
        })
        let ys = 1
        this.jroll.on("scrollEnd", function(mr) {
            let that = mr;
            let tp = mr.props;
            return function(){
                if (this.y === tp.topf) {
                    console.log(tp.topMax)
                    if(ys>=tp.topMax){
                        console.log("已滑动到顶部");
                        that.setState({topShow : true})
                        if(typeof tp.topFr === "function")tp.topFr()
                    }
                }
                if (this.y === this.maxScrollY) {
                    if(this.maxScrollY !== 0 && ys<=(this.maxScrollY+tp.bottomMax)){
                        console.log("已滑动到底部");
                        that.setState({bottomShow : true})
                        if(typeof tp.bottomFr === "function")tp.bottomFr()
                    }
                }
            }
        }(this))
        this.jroll.on("scroll", function() {
            ys = this.y
        });
        
 
    }
    componentDidUpdate() {
        setTimeout(() =>  {
            if (!!this.jroll&&this.jroll.wrapper) {
                this.jroll.refresh()
                if(this.state.topShow){
                    this.jroll.scrollTo(0, 0, 0, true);
                    this.setState({topShow : false});
                }
            }
        }, 500)
    }
    componentWillUnmount() {
        setTimeout(() =>  {
            this.jroll.destroy()
        }, 300)
    }
    toS(){
        alert(1)
    }
    render() {
        return (
            <div className={styles.rollBox} style={{height:this.props.height?this.props.height:"100%"}}>   
                <div className={styles.rbg}>
                    <div>{this.state.topShow?(this.props.topLoading?this.props.topLoading:null):null}</div>
                    <div>{this.props.bottomLoading?this.props.bottomLoading:null}</div>
                </div>
                <div id={this.props.ID ? this.props.ID : 'wrappers'} className={styles.content}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}